<template>
    <div id="app">
        <!-- 只留下默认的路由出口 -->
        <!-- 组件也可以写成但标签的方式-->
        <!-- <router-view /> -->
        <van-button loading type="primary" loading-type="spinner" />
        <van-button plain type="info">朴素按钮</van-button>
        <!-- 1. 单个日期选择的日历 -->
        <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" /> -->
        <!-- this.$emit('confirm') -->
        <van-calendar v-model="show" @confirm="onConfirm" />
        <!-- 2. 日期范围的日历 -->
        <van-cell title="选择日期区间" :value="date" @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
        <!-- 3. slider -->
        <van-slider v-model="value" @change="onChange" />

        <van-switch v-model="checked" />
    </div>
</template>
<script>
// import dayjs from 'dayjs'
export default {
    data() {
        return {
            date: '',
            show: false,
            value: 50,
            checked: false
        }
    },
    methods: {
        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`

            // YYYY-MM-DD
        },
        onConfirm(date) {
            console.log(date)
            const [start, end] = date
            console.log(start, end)
            this.show = false
            // this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
            this.date = `${this.$dayjs(start).format(
                'YYYY-MM-DD'
            )}-${this.$dayjs(end).format('YYYY-MM-DD')}`
            console.log(this.date)
        },
        onChange(value) {
            // Toast('当前值：' + value)
            this.$toast('当前值' + value)
        }
    }
}
</script>
